import React, { useInsertionEffect, useEffect, useLayoutEffect } from 'react'
 
export default function UseInsertionEffect() {

  useInsertionEffect(() => {
    // console.log('useInsertionEffect')
    const style = document.createElement('style')
    style.innerHTML = '.box { color: red }'
    document.head.appendChild(style)
  })

  useEffect(() => {
    console.log('useEffect')
  })

  useLayoutEffect(() => {
    console.log('useLayoutEffect')
  })

  return (
    <div className="box">UseInsertionEffect</div>
  )
}